import type { ITagGroup } from '@/interfaces';

export default function QueryTagGroupTags({ details }: { details: ITagGroup }) {
  const tags = details.tags || [];

  return (
    <div className="row">
      <div className="col">
        <div className="card">
          <div className="card-header bg-transparent text-muted">
            <i className="bi bi-list me-2"></i>
            标签
          </div>
          <div className="card-body">
            <div className="table-responsive">
              <table className="table table-hover align-middle">
                <thead>
                  <tr className="text-nowrap">
                    <th scope="col" className="w-10 fw-normal">
                      ID
                    </th>
                    <th scope="col" className="w-10 fw-normal">
                      名称
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {tags.map((item) => {
                    return (
                      <tr key={item.id} className="text-nowrap">
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>

              {tags.length === 0 && (
                <div className="text-center text-muted">暂无标签</div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
